<template>
  <div class="global-bg-white font-inter min-h-screen flex flex-col scrollbar-hide">
    <!-- 导航栏合并 -->
    <!-- <header class="header-bar shadow-sm sticky top-0 z-50 transition-all duration-300 rounded-b-2xl" :class="{'shadow-md': scrollY > 50}" style="display: flex;justify-content: center ;">
      <div class="container px-4 header-flex"> -->
        <!-- 左侧logo -->
        <!-- <div class="header-logo">
          <div class="bg-white rounded-full shadow flex items-center justify-center w-10 h-10 mr-2 border border-blue-100">
            <i class="fa fa-users text-primary text-2xl" style="color: #165dff;font-size: 24px;"></i>
          </div>
          <span class="text-2xl font-extrabold text-primary tracking-wide logo-title" style="color: #165dff; font-size: 24px; font-weight: bold;">组队学习</span>
        </div> -->
        <!-- 中间菜单 -->
        <!-- <div class="w-full flex justify-center">
          <a-menu mode="horizontal" class="flex-1 flex justify-center bg-white border-none shadow-none"
            style="background: white; width: 400px; " :selectedKeys="[activeSection]"> -->
            <!-- <a-menu-item key="dashboard">
              <a href="#dashboard" class="text-gray-600 hover:text-primary transition-colors" style="text-decoration: none; font-size: 16px;" @click.prevent="changeSection('dashboard')">学习看板</a>
            </a-menu-item> -->
            <!-- <a-menu-item key="match">
              <a href="#match" class="text-gray-600 hover:text-primary transition-colors" style="text-decoration: none; font-size: 16px;" @click.prevent="changeSection('match')">组队大厅</a>
            </a-menu-item>
            <a-menu-item key="teams">
              <a href="#teams" class="text-gray-600 hover:text-primary transition-colors" style="text-decoration: none; font-size: 16px;" @click.prevent="changeSection('teams')">我的小组</a>
            </a-menu-item>
            <a-menu-item key="discussion">
              <a href="#discussion" class="text-gray-600 hover:text-primary transition-colors" style="text-decoration: none; font-size: 16px;" @click.prevent="changeSection('discussion')">小组讨论</a>
            </a-menu-item>
            <a-menu-item key="game">
              <a href="#game" class="text-gray-600 hover:text-primary transition-colors" style="text-decoration: none; font-size: 16px;" @click.prevent="changeSection('game')">学习游戏</a>
            </a-menu-item>
          </a-menu>
        </div> -->
        <!-- 右侧用户区 -->
        <!-- <div class="header-user">
          <div class="flex items-center user-trigger px-2 py-1 rounded-lg hover:bg-blue-50 transition">
            <img src="https://picsum.photos/id/64/100/100" alt="用户头像" class="user-avatar">
            <span class="ml-2 text-gray-700 font-medium">张小明</span>
            <i class="fa fa-angle-down ml-1 text-gray-400"></i>
          </div>
        </div> -->
      <!-- </div>
    </header> -->
    <!-- 主内容区 -->
    <main class="container px-4 flex-grow space-y-16 md:space-y-24">
      <!-- <DashboardSection
        v-if="activeSection === 'dashboard'"
        v-model:selectedDate="selectedDate"
        :task1="task1"
        :task2="task2"
        :task3="task3"
        :task4="task4"
        @createTask="createTask"
        @fetchDashboardData="fetchDashboardData"
      /> -->
      <MatchSection
        v-if="activeSection === 'match'"
      />
      <!-- <TeamsSection
        v-if="activeSection === 'teams'"
        :progressColor="progressColor"
        @goToDiscussion="goToDiscussion"
        @acceptInvitation="acceptInvitation"
        @rejectInvitation="rejectInvitation"
        @switchTeam="switchTeam"
        @joinNewTeam="joinNewTeam"
      />
      <DiscussionSection
        v-if="activeSection === 'discussion'"
        @switchTeam="switchTeam"
        @joinNewTeam="joinNewTeam"
      />
      <GameSection v-if="activeSection === 'game'" /> -->
    </main>
    <!-- 页脚系统信息区块 -->
    <footer class="site-footer">
      <div class="footer-content">
        <div class="footer-main">
          <div class="footer-logo-title">
            <span class="footer-logo">蜗牛AI在线课堂</span>
          </div>
          <div class="footer-links">
            <span>联系方式：support@snailai.com</span>
            <span class="footer-divider">|</span>
            <span>客服电话：400-123-4567</span>
            <span class="footer-divider">|</span>
            <span>技术支持：蜗牛AI团队</span>
          </div>
          <div class="footer-icp">
            <span>蜗牛AI科技有限公司 版权所有 © 2024</span>
            <span class="footer-divider">|</span>
            <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener"
               class="footer-link">粤ICP备2024000001号-1</a>
            <span class="footer-divider">|</span>
            <a href="https://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030502000001" target="_blank"
               rel="noopener" class="footer-link">
              <img src="https://www.beian.gov.cn/img/ghs.png" alt="公安备案"
                   style="height: 16px;vertical-align: middle;margin-right: 2px;" />粤公网安备 44030502000001号
            </a>
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import MatchSection from '@/components/teamlearning/MatchSection.vue'

// import { Menu, MenuItem, Button } from 'ant-design-vue';
// import DashboardSection from './teamlearning/DashboardSection.vue';
// import TeamsSection from './teamlearning/TeamsSection.vue';
// import DiscussionSection from './teamlearning/DiscussionSection.vue';
// import GameSection from './teamlearning/GameSection.vue';

const router = useRouter();

const scrollY = ref(0);

// 用户信息相关 - 直接在组件中实现
const userInfo = ref(null);

// 检查用户登录状态
const checkUserLogin = () => {
  try {
    const storedUserInfo = localStorage.getItem('userInfo')
    if (storedUserInfo) {
      const userInfo = JSON.parse(storedUserInfo)
      console.log('组队学习平台 - 当前登录用户信息:', userInfo)
      return userInfo
    } else {
      console.log('组队学习平台 - 用户未登录')
      return null
    }
  } catch (error) {
    console.error('检查用户登录状态失败:', error)
    return null
  }
}

// 获取当前用户ID - 等效于 StpUtil.getLoginIdAsInt()
const getLoginIdAsInt = () => {
  const userInfo = checkUserLogin()
  if (userInfo && userInfo.userId) {
    return parseInt(userInfo.userId)
  }
  return null
}

// 获取当前用户ID
const getCurrentUserId = () => {
  const userInfo = checkUserLogin()
  if (userInfo && userInfo.userId) {
    return userInfo.userId
  }
  return null
}

onMounted(() => {
  window.addEventListener('scroll', () => {
    scrollY.value = window.scrollY;
  });
  document.body.style.background = '#fff';

  // 检查用户登录状态
  userInfo.value = checkUserLogin();
});

const activeSection = ref('match');
function changeSection(section: string) {
  activeSection.value = section;
}

const selectedDate = ref(new Date());
const dashboardData = ref({});
const task1 = ref({ completed: false });
const task2 = ref({ completed: false });
const task3 = ref({ completed: false });
const task4 = ref({ completed: false });

const fetchDashboardData = () => {};
const createTask = () => {};

const selectedChapter = ref('');
const chapters = ref([
  { value: 'chapter1', label: '第一章' },
  { value: 'chapter2', label: '第二章' },
]);

const progressColor = '#165dff';

const goToDiscussion = (teamId: number) => {
  router.push({
    name: 'TeamDiscussion',
    params: { teamId },
  });
};

const acceptInvitation = (teamId: number) => {
  console.log(`接受邀请: ${teamId}`);
};

const rejectInvitation = (teamId: number) => {
  console.log(`拒绝邀请: ${teamId}`);
};

const switchTeam = (teamId: number) => {
  console.log(`切换到小组: ${teamId}`);
};

const joinNewTeam = () => {
  console.log('加入新小组');
};
</script>
<style scoped>

:deep(.el-button) {
  border-radius: 999px;
  font-size: 1rem;
  padding: 0.75em 2em;
}
.header-bar {
  background: #fff;
  border-bottom: 1.5px solid #e5e7eb;
}
.header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1400px;
  margin: 0 auto;
  height: 64px;
}
.header-logo {
  display: flex;
  align-items: center;
  min-width: 200px;
}
.logo-title {
  letter-spacing: 2px;
  background: linear-gradient(90deg, #165dff 60%, #722ed1 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.header-user {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 180px;
}
.user-trigger {
  display: flex;
  align-items: center;
  transition: background 0.2s;
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #bfdbfe;
  box-shadow: 0 1px 4px rgba(22,93,255,0.08);
}
.global-bg-white {
  background: #fff !important;
}

.qqq{
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 页脚系统信息区块 */
.site-footer {
  width: 100vw;
  background: linear-gradient(180deg, #232b4d 0%, #2d1e4f 100%);
  color: #eaf3ff;
  padding: 38px 0 24px 0;
  font-size: 15px;
  margin-top: 0;
  letter-spacing: 0.2px;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-main {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer-logo-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.footer-logo {
  color: #fff;
  font-weight: 800;
  font-size: 1.35em;
  letter-spacing: 2px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: #b6c6e3;
  font-size: 15px;
}

.footer-divider {
  margin: 0 8px;
  color: #3a4a6a;
}

.footer-icp {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  color: #b6c6e3;
  font-size: 14px;
}

.footer-link {
  color: #b6c6e3;
  text-decoration: underline;
  transition: color 0.18s;
}

.footer-link:hover {
  color: #fff;
}

@media (max-width: 700px) {
  .footer-content {
    padding: 0 8px;
  }

  .footer-main {
    gap: 10px;
  }

  .footer-links, .footer-icp {
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    text-align: center;
  }
}

</style>
